<template>
	<form class="change-password-modal px-[25px] md:px-[35px] pt-4 pb-10" @submit.prevent="onSubmit">
		<input type="submit" class="hidden" />
		<BaseTip class="mb-4" textT="set.security.popup.2fa.tip" />
		<div class="flex justify-center items-center h-[150px] my-5">
			<BaseLoadingCircle v-if="loadingGet" />
			<div v-else class="w-[150px] h-[150px] p-[6px] bg-white rounded-sm">
				<n-qr-code :value="generateKeyResult.qrCode" :size="138" type="svg" class="!p-0" />
			</div>
		</div>
		<BaseInput
			v-model="generateKeyResult.googleSecretKey"
			:name="FormFieldName.googleSecretKey"
			labelT="set.security.popup.2fa.key"
			:clearable="false"
			readonly>
			<template #suffix>
				<BaseCopy :value="generateKeyResult.googleSecretKey" />
			</template>
		</BaseInput>
		<BaseInput
			v-model="formValue.code"
			:name="FormFieldName.googleSecretCode"
			labelT="set.security.popup.2fa.code">
			<template #suffix>
				<BasePaste @paste="(v) => (formValue.code = v)" />
			</template>
		</BaseInput>
		<BaseInput
			v-model="formValue.password"
			:name="FormFieldName.googleSecretCode"
			labelT="account.password"
			type="password" />
		<BaseButton
			class="mt-10"
			type="primary"
			textT="action.enable"
			:loading="loadingEnable2fa"
			@click="onSubmit" />
	</form>
	<AccountOperateVerify
		ref="operateVerifyRef"
		confirmTextT="action.enable"
		:appear="false"
		:verifyInfo="enable2faResult as Enable2fa['result']"
		:onFinish="onSubmitVerify"
		@close="loadingEnable2fa = false" />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { NQrCode } from 'naive-ui'
import { authVerifyCode, enable2fa, generateGoogleSecretKey } from '@/api/account'
import { Enable2fa } from '@/api/account-type'
import {
	BaseButton,
	BaseCopy,
	BaseInput,
	BaseLoadingCircle,
	BasePaste,
	BaseTip
} from '@/components/base'
import { FormFieldName } from '@/enums'
import { useRequest } from '@/hooks'
import { useProfileStore } from '@/store'
import { AccountOperateVerify } from '@/components/account'
import { t } from '@/utils'

const profileStore = useProfileStore()
const operateVerifyRef = ref<InstanceType<typeof AccountOperateVerify>>()
const formValue = reactive({
	code: '',
	password: '',
	contactType: ''
})
const generateKeyResult = reactive({
	googleSecretKey: '',
	qrCode: ''
})

const { run: runGet, loading: loadingGet } = useRequest(generateGoogleSecretKey, {
	showError: true,
	onSuccess: (data: any) => {
		Object.assign(generateKeyResult, data)
	}
})
const {
	run: runEnable2fa,
	loading: loadingEnable2fa,
	data: enable2faResult
} = useRequest<Enable2fa['result']>(enable2fa, {
	showError: true,
	onSuccess: async () => {
		await operateVerifyRef.value?.openVerify()
	}
})
const { run: runVerifyCode } = useRequest(authVerifyCode, {
	showError: true,
	showSuccess: t('set.tip.successEnable2fa'),
	onSuccess: () => {
		profileStore.getUserInfo()
		profileStore.show.enable2fa = false
		operateVerifyRef.value?.close()
	}
})

const onSubmit = () => {
	runEnable2fa({
		googleSecretKey: generateKeyResult.googleSecretKey,
		...formValue
	})
}
const onSubmitVerify = async (verify: any) => {
	const res = enable2faResult.value
	if (res) {
		await runVerifyCode({
			email: res.email,
			internationalAreaCode: res.internationalAreaCode,
			mobile: res.mobile,
			code: verify.verifyCode
		})
	}
}

onMounted(() => {
	runGet()
})
</script>

<style scoped></style>
